<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<meta content="yes" name="apple-mobile-web-app-capable" />
		<meta content="black" name="apple-mobile-web-app-status-bar-style" />
		<meta content="telephone=no" name="format-detection" />
		<meta content="email=no" name="format-detection" />
		<title>GIS终端</title>

		<link rel="stylesheet" href="../../css/s_plus.css" />
		<link rel="stylesheet" href="../../css/base.css" />
		<link rel="stylesheet" href="../../css/layout.css" />
		<link rel="stylesheet" href="../../css/choice.css" />
		<link rel="stylesheet" href="../../css/hui.css" />

		<script type="text/javascript" src="../../libs/vue.js"></script>
		<script type="text/javascript" src="../../js/jquery.1.9.1.min.js"></script>
		<script type="text/javascript" src="../../js/app/url.js"></script>
		<script type="text/javascript" src="../../libs/hui.js"></script>
		<script type="text/javascript" src="../../js/s_plus.js"></script>
		<script type="text/javascript" src="../../js/md5.js"></script>
		<script type="text/javascript" src="../../js/app/api.js"></script>
		<!--<script type="text/javascript" src="../../js/control/mescroll/mescroll.min.js"></script>-->
		<!--<link rel="stylesheet" href="../../js/control/mescroll/mescroll.min.css" />-->
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=a82yNQICnHARgGpKuPH1wWZWQcBD2Llo"></script>
		<!--<script type="text/javascript" src="../work/menu.js"></script>-->

		<style>
			/*隐藏百度地图 底部LOGO*/
			
			.BMap_cpyCtrl {
				display: none;
			}
			
			.anchorBL {
				display: none;
			}
		</style>
	</head>

	<body>
		<section id="wrapper" class="wrapper">
			<section class="pusher">
				<section class="sidenav sidebtn">
					<!--侧边栏-->

				</section>
				<section class="mainbody">
					<!--正文-->
				 <header class="f_l maxbox header">
        <a class="side_arrow f_l arrow_l" data-effect="sidebtn"><i class="iconfont">&#xe600;</i></a>
        <h2>GIS终端</h2>
      </header>
					<section class="f_l maxbox map">
						<!--<div class="f_l searchbar">
          <input class="search_key" name="" type="text" placeholder="请输入关键字">
          <button class="search_btn" name=""><i class="iconfont">&#xe63e;</i></button>
        </div>-->
						<!--<img src="../../images/map.jpg">-->

						<div id="allmap" style="width: 100%;height:100%"></div>

					</section>
					<section class="f_l maxbox work_list" style="display: none;">
						<dl>
							<a @click="go(zd)">
								<dt>
              <!--<i class="iconfont bg_red">&#xe60f;</i>-->
              <b>终端详情</b>
            </dt>
								<dd class="txt_list">
									<p><em>设备状态：</em>{{showStatus(zd.STATUS)}}</p>
									<p><em>设备编号：</em>{{zd.TERMIMAL_CODE}}</p>
									<p><em>设备地址：</em>{{zd.BELONG_STREET}}</p>
								</dd>
							</a>
						</dl>
					</section>
				</section>
			</section>
		</section>

		<script>
				//动态插入公用菜单JS
	var menuJsPath = "../work/menu.js?time=";
	 var randomh=Math.random();
     var e = document.getElementsByTagName("script")[0];
     var d = document.createElement("script");
     d.src = menuJsPath+randomh+"";
     d.type = "text/javascript"; 
     d.async = true;
     d.defer = true;
     e.parentNode.insertBefore(d,e);

			
			var head = $(".header").height();
			var foot = $(".work_list").height();
			var pageHeight = $(document).height();
			var mapHeight = pageHeight - (head );
			$("#allmap").height(mapHeight);
			console.log("head-" + head + "  foot--" + foot + "  pageHeight-" + pageHeight);

			var sp = new Vue({
				el: "#wrapper",
				data: {
					zd: {}
				},
				methods: {
					go: function(cell) {
						//					var workId= this.zd.workId;

						localStorage.setItem("cell", JSON.stringify(cell));

						hui.open("/modules/terminal/terminal_show.html", {}, true, {});
					},

					showStatus: function(status) {

						if(status == '0') {
							return "无告警	";
						} else if(status == '1') {
							return "一般告警";
						} else if(status == '2') {
							return "严重告警";
						} else {
							return "工单处理";

						}
					},
					worklist: function() {
						hui.open("terminal_list.html", {}, true, {});
					}
				}
			});
		</script>

		<script type="text/javascript">
			// 百度地图API功能
			var map = new BMap.Map("allmap");
			var point = new BMap.Point(112.9453203518,28.2340227593);
			map.centerAndZoom(point, 12);
			map.enableScrollWheelZoom(false);

			var geolocation = new BMap.Geolocation();
			geolocation.getCurrentPosition(function(r) {
				console.log(r.point)
				if(this.getStatus() == BMAP_STATUS_SUCCESS) {

					//			var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/fox.gif", new BMap.Size(300,157));
					var myIcon = new BMap.Icon("../../images/danger01.png", new BMap.Size(300, 157));
					var mk = new BMap.Marker(r.point, {
						icon: myIcon
					});
					mk.addEventListener("click", attribute);

					function attribute() {
						var p = mk.getPosition(); //获取marker的位置
						alert("marker的位置是" + p.lng + "," + p.lat);

					}

					//					map.addOverlay(mk); //标出所在地
					//					map.panTo(r.point); //地图中心移动

					var point = new BMap.Point(r.point.lng, r.point.lat); //用所定位的经纬度查找所在地省市街道等信息
					var gc = new BMap.Geocoder();
					gc.getLocation(point, function(rs) {
						var addComp = rs.addressComponents;

						console.log(rs.address); //地址信息
						//alert(rs.address);//弹出所在地址

					});
				} else {
					alert('定位失败，请检查您的手机定位功能是否打开' + this.getStatus());
				}
			}, {
				enableHighAccuracy: true
			})

			//标记
			function addMarker(cell) {
//				param.LATITUDE;
//							cell.lng = param.LONGITUDE;
				var point = new BMap.Point(cell.LONGITUDE, cell.LATITUDE);
				var imgUrl = "../../images/danger01.png";
				
				if(cell.STATUS=='1'){
					imgUrl="../../images/danger02.png";
				}
				if(cell.STATUS=='2'){
					imgUrl="../../images/danger04.png";
				}
				
				var myIcon = new BMap.Icon(imgUrl, new BMap.Size(22, 30));
				var mk = new BMap.Marker(point, {
					icon: myIcon
				});
				//					var label = new BMap.Label("我是文字标注哦",{offset:new BMap.Size(20,-10)});
				//					mk.setLabel(label);

				mk.addEventListener("click", attribute);
				map.addOverlay(mk); //标出所在地

				if(cell.over) {
				map.panTo(point); //地图中心移动

				}

				function attribute() {
					//						alert('终端ID:'+cell.zdID);
					var p = mk.getPosition(); //获取marker的位置
					console.log("cell.zdID-----"+cell.TERMIMAL_CODE);
					loadDetail(cell);

				$("#allmap").height(mapHeight-foot);
				$(".work_list").show();

				}

			}

			loadData();

			function loadData() {
				var path = urlManager.terminalList();
				var username = localStorage.getItem("username");
				var sec = localStorage.getItem("sec_pwd");
				var time = getNow();
				var key = "loginName=" + username + "&passWord=" + sec + "&time=" + time;

				console.log(key);

				var paramKey = hex_md5(key);

				var jsonParam = JSON.stringify({
					loginName: username,
					time: time,
					key: paramKey
				});

				hui.loading("");

				$.ajax({
					type: "GET",
					url: path,
					beforeSend: function(request) {
						request.setRequestHeader("loginName", username);
						request.setRequestHeader("time", time);
						request.setRequestHeader("sign", paramKey);
						request.setRequestHeader("Content-Type", "application/text");

					},
					success: function(result) {
						hui.closeLoading();
//						console.log("GIS终端列表:" + JSON.stringify(result));
						var datas = result.list;
												console.log("GIS终端列表:" + JSON.stringify(datas));

						if(result.count==0){
							hui.toast("暂无数据");
						}

						if(datas == null) {
							return;
						}
						for(var i = 0; i < datas.length; i++) {
							var param = datas[i];
							var cell = new Object();
							cell.status=param.STATUS;
							cell.lat = param.LATITUDE;
							cell.lng = param.LONGITUDE;
							cell.title = param.ALARM_TITLE;
							cell.zdID = param.ZD_ID;
							cell.id = param.TERMIMAL_CODE;
							cell.data = param;
							if(datas.length - 1 == i) {
								param.over = true;
							}
							console.log(JSON.stringify(param));
							addMarker(param);
						}

					}

				});

			}

			//终端详情
			function loadDetail(cell) {

				console.log("----" + JSON.stringify(cell));
				//			    $(".work_list").show();
				sp.zd = cell;
				
				

			}

			//获取当前时间戳
			function getNow() {
				var timestamp = new Date().getTime();
				return timestamp;
			}
		</script>
	</body>

</html>
<!--侧边栏向左移动效果*该放在head无效-->
<script src="../../js/modernizr.custom.js"></script>
<script src="../../js/classie.js"></script>
<script src="../../js/sidebarEffects.js"></script>